<template>
  <div class="pbox" v-if="material_center_status">
    <div class="Product_materials" v-if="list">
      <div class="Product_materials_top">
        <div class="Product_materials_title">商品素材</div>
        <div class="Product_materials_icon" @click="to_materialCenter">查看全部<i class="fa fa-angle-right"></i></div>
      </div>
      <div class="listBox">
        <div class="Product_conten">{{ list.content }}</div>
        <div class="Product_materials_icon_img">
          <template v-if="list.images.length > 0">
            <img :src="item" alt="" class="imgFill" v-for="(item, index) in list.images" :key="index" />
          </template>
          <template v-else-if="list.videos && list.videos.video_image">
            <img :src="list.videos.video_image" alt="" class="imgFill" />
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["goods_info"],
  data() {
    return {
      list: null,
      material_center_status: 0
    };
  },
  mounted() {
    let basic_info = JSON.parse(localStorage.getItem("yz_basic_info")).plugin_setting;
    if (basic_info.cloud_shop || basic_info.brand_market) {
      if (basic_info.cloud_shop.material_center_status == 1 || basic_info.brand_market.material_center_status == 1) {
        if (basic_info.cloud_shop.material_center_status) {
          this.material_center_status = basic_info.cloud_shop.material_center_status;
        }
        if (basic_info.brand_market.material_center_status) {
          this.material_center_status = basic_info.brand_market.material_center_status;
        }
        this.getData();
      }
    }
  },
  methods: {
    to_materialCenter() {
      this.$router.push(this.fun.getUrl("brand_source_detail", { id: this.list.id }));
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.material-center.api.centerlist.index", { goods_id: this.$route.params.id }, "");
      if (result) {
        if (data.list.data.length <= 0) {
          this.list = null;
          return;
        }
        this.list = data.list.data[0];
      } else {
        this.$toast(msg);
      }
    }
  },
  computed: {
    checkcloud(key) {
      return function(key) {
        if (!this.goods_info?.plugin?.cloud_shop) return;
        if (this.goods_info?.plugin.cloud_shop.hasOwnProperty(key)) {
          return this.goods_info?.plugin.cloud_shop[key];
        }
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.Product_materials {
  margin: 0.63rem 0.75rem;
  padding: 0.94rem 0.75rem;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 0.63rem;
  .Product_materials_icon_img {
    display: flex;
    justify-content: flex-start;
    overflow-x: scroll;
    .imgFill {
      flex-shrink: 0;
      margin: 0;
      width: 6.56rem;
      height: 6.56rem;
      border-radius: 0.5rem;
      margin-right: 0.38rem;
    }
    .imgFill:last-child {
      margin-right: 0;
    }
  }
  .Product_conten {
    font-size: 0.88rem;
    color: #00001c;
    line-height: 1.25rem;
    text-align: left;
    margin-top: 0.94rem;
    margin-bottom: 0.63rem;
  }
  .Product_materials_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .Product_materials_title {
      font-weight: bold;
      font-size: 0.94rem;
      color: #00001c;
    }
    .Product_materials_icon {
      font-size: 0.88rem;
      color: #808080;
      display: flex;
      align-items: center;
    }
    .fa-angle-right {
      font-size: 1.2rem;
      margin-left: 0.47rem;
      color: #808080;
    }
  }
}
</style>
